<template>
  <div>
    <a-card>
      <a-button type="primary" class="addRelevance_btn" @click="addRelevanceClick">
        <template #icon>
          <icon-plus />
        </template>
        新增</a-button
      >
      <a-table
        :loading="isSubUserRelevanceDevListTableLoading"
        :columns="subUserRelevanceDevTableColumns"
        :data="currentSubUserRelevanceDevList"
        :bordered="{cell:true}"
      >
        <!-- 序号 -->
        <template #index="{ rowIndex }">
          <div>
            {{ rowIndex + 1 }}
          </div>
        </template>

        <!-- 在线总时长 -->
        <template #totalOnlineTime="{ rowIndex }">
          <div>{{ currentSubUserRelevanceDevList[rowIndex].totalOnlineTime }} (h)</div>
        </template>
        <!-- 离线总时长 -->
        <template #totalOfflineTime="{ rowIndex }">
          <div>{{ currentSubUserRelevanceDevList[rowIndex].totalOfflineTime }} (h)</div>
        </template>
      </a-table>
    </a-card>

    <!-- 添加关联设备的抽屉组件 -->
    <a-drawer :width="600" :visible="isShowAddRelevanceDevDrawer" @cancel="addRelevanceCancelClick" unmountOnClose>
      <template #title> 新增关联设备 </template>
      <div class="add_relevance_drawer_box">
        <div class="header">
          <a-form :model="selectDevListParam" :style="{ width: '480px' }" layout="inline">
            <a-form-item field="name" label="设备编码">
              <a-input style="width: 260px" v-model="selectDevListParam.devGId" placeholder="请输入设备编码" />
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="getDevListFunc">
                <template #icon>
                  <icon-search />
                </template>
                查询</a-button
              >
            </a-form-item>
          </a-form>
        </div>
        <div class="current_select_dev_info_box"></div>
        <div class="dev_list_box">
          <a-card class="dev_list_card" style="padding: 0" :loading="isDevListLoading">
            <a-list :hoverable="true">
              <a-list-item v-for="dl in devList" :key="dl.devId" @click="devListItemSelectClick(dl)">
                <div class="devName_box">设备名称：{{ dl.devName }}</div>
                <div class="devGId_box">设备编码：{{ dl.devGId }}</div>
                <div class="dev_select_characteristic" v-if="currentSelectedDevInfo.devId == dl.devId">
                  <svg
                    t="1699342731554"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="5691"
                    width="30"
                    height="30"
                  >
                    <path
                      d="M1024 1024V0L0 1024h1024z m-89.234286-497.225143c19.748571 19.748571 19.748571 51.785143 0 71.533714l-250.294857 250.294858a50.541714 50.541714 0 0 1-71.533714 0L469.942857 705.609143a50.541714 50.541714 0 1 1 71.460572-71.533714l107.300571 107.300571 214.528-214.601143c19.748571-19.748571 51.785143-19.748571 71.533714 0z"
                      fill="#1d60fb"
                      p-id="5692"
                    ></path>
                  </svg>
                </div>
              </a-list-item>
            </a-list>
          </a-card>
        </div>
      </div>
      <template #footer>
        <div class="drawer_footer_box">
          <div class="dev_info_box">
            <span v-if="currentSelectedDevInfo.devName != undefined">
              <span class="label">当前选择设备：</span>
              <span class="content">{{ currentSelectedDevInfo.devName }}</span>
            </span>
          </div>
          <div class="btn_box">
            <a-button @click="addRelevanceCancelClick">取消</a-button>
            <a-button type="primary" @click="addRelevanceOkClick">确定</a-button>
          </div>
        </div>
      </template>
    </a-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
export default defineComponent({
  name: 'Table'
})
</script>
<script lang="ts" setup>
import { useSubUserStore } from '@/store'
import type { subUserRelevanceDevListType } from '@/view/subUser/type.ts'
import { selectDevListBySubUserApi, selectDevListApi, bindDeviceApi } from '@/apis/subUser/index.ts'
const subUserStore = useSubUserStore()

// 设备列表的加载标识
const isDevListLoading = ref(false)

// 当前选择的设备信息
const currentSelectedDevInfo = ref({})

// 列表选择点击事件
const devListItemSelectClick = (row: any) => {
  currentSelectedDevInfo.value = row
}

// 新增关联设备的点击事件
const addRelevanceClick = () => {
  getDevListFunc()
  isShowAddRelevanceDevDrawer.value = true
}

// 新增关联设备的抽屉确认点击事件
const addRelevanceOkClick = async () => {
  if (currentSelectedDevInfo.value.devId == undefined) {
    Message.warning('请在设备列表中选中设备')
    return
  }
  await bindDeviceApi({
    platFormSubUserId: subUserStore.currentSubUserInfo.platFormSubUserId,
    devId: currentSelectedDevInfo.value.devId
  }).then((res) => {
    // console.log(res)
    isShowAddRelevanceDevDrawer.value = false
    Message.success(res.msg)
    currentSelectedDevInfo.value = {}
    getSubUserRelevanceDevFunc()
  })
  // console.log(currentSelectedDevInfo.value.devId)
}

// 新增关联设备的抽屉取消点击事件
const addRelevanceCancelClick = () => {
  isShowAddRelevanceDevDrawer.value = false
  currentSelectedDevInfo.value = {}
}

// 子用户关联设备表格的字段规则
const subUserRelevanceDevTableColumns = ref([
  {
    title: '序号',
    dataIndex: 'index',
    slotName: 'index',
    align: 'center'
  },
  {
    title: '设备名称',
    dataIndex: 'devName',
    align: 'center'
  },
  {
    title: '设备编号',
    dataIndex: 'devGId',
    align: 'center'
  },
  {
    title: '创建时间',
    dataIndex: 'devCreateTime',
    align: 'center'
  },
  {
    title: '最近上线时间',
    dataIndex: 'lastOnlineTime',
    align: 'center'
  },
  {
    title: '最近离线时间',
    dataIndex: 'lastOfflineTime',
    align: 'center'
  },
  {
    title: '在线总时长',
    dataIndex: 'totalOnlineTime',
    slotName: 'totalOnlineTime',
    align: 'center'
  },
  {
    title: '离线总时长',
    dataIndex: 'totalOfflineTime',
    slotName: 'totalOfflineTime',
    align: 'center'
  },
  {
    title: '设备描述',
    dataIndex: 'index',
    align: 'center'
  }
])

// 子用户关联设备列表表格加载标识
const isSubUserRelevanceDevListTableLoading = ref(false)

// 显示新增关联设备的抽屉组件的标识
const isShowAddRelevanceDevDrawer = ref(false)

// 当前用户已关联的设备列表
const currentSubUserRelevanceDevList = ref<subUserRelevanceDevListType>([])

// 查询子用户关联设备列表的函数
const getSubUserRelevanceDevFunc = async () => {
  isSubUserRelevanceDevListTableLoading.value = true
  await selectDevListBySubUserApi(subUserStore.currentSubUserInfo.platFormSubUserId).then((res) => {
    currentSubUserRelevanceDevList.value = res.data
    console.log(currentSubUserRelevanceDevList.value)
    isSubUserRelevanceDevListTableLoading.value = false
  })
}

// 查询设备列表的参数
const selectDevListParam = ref({
  page: 1,
  size: 100,
  devGId: ''
})

// 设备数据列表
const devList = ref({})

// 查询设备列表的函数
const getDevListFunc = async () => {
  isDevListLoading.value = true
  await selectDevListApi(selectDevListParam.value).then((res) => {
    devList.value = res.data.list
    isDevListLoading.value = false
  })
}

// 初始化
onMounted(() => {
  getSubUserRelevanceDevFunc()
  console.log(subUserStore.currentSubUserInfo)
})
</script>

<style lang="scss" scoped>
.addRelevance_btn {
  margin-bottom: 14px;
}

.add_relevance_drawer_box {
  .header {
    margin-bottom: 16px;
  }

  .dev_list_box {
    .arco-list-item {
      position: relative;
    }
    .devName_box {
      letter-spacing: 1px;
      font-size: 16px;
      font-weight: bold;
      font-family: '黑体';
      // margin-bottom: 6px;
    }
    .devGId_box {
      letter-spacing: 1px;
      color: gray;
    }

    .dev_select_characteristic {
      padding: 0;
      position: absolute;
      right: 0;
      bottom: 0px;
      height: 30px;
    }
  }
}

.drawer_footer_box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .dev_info_box {
    line-height: 53px;
    .label {
    }
    .content {
      font-size: 16px;
      font-weight: bold;
      letter-spacing: 2px;
      font-family: '黑体';
    }
  }
  .btn_box {
    line-height: 53px;
    .arco-btn {
      margin-right: 10px;
    }
  }
}

::v-deep .dev_list_card {
  .arco-card-body {
    padding: 0 !important;
  }
}
</style>
